<template>
  <div>
    <div class="guidePage">
      <!-- Swiper -->
      <div class="swiper-container guidePage-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="guidePageslide">
              <div class="img img1"></div>
              <!-- <img src="../../assets/img/music03.jpg" alt=""> -->
              <h3>想听，想唱，请进来！</h3>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="guidePageslide">
              <div class="img img2"></div>

              <!-- <img src="../../assets/img/music04.jpg" alt=""> -->
              <h3>一起开心，享受！</h3>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="guidePageslide">
              <div class="img img3"></div>

              <!-- <img src="../../assets/img/music04.jpg" alt=""> -->
              <!-- <h3>渐进式javascript框架</h3> -->

              <van-button type="primary" @click="gogo" size="mini"
                >进入首页</van-button
              >
            </div>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination guidePage-pagination"></div>
      </div>
    </div>
  </div>
</template>

<script>
// https://www.swiper.com.cn/
// $cnpm install swiper@5.3.6 -S
import Swiper from "swiper";
export default {
  mounted() {
    new Swiper(".guidePage-container", {
      pagination: {
        el: ".guidePage-pagination",
      },
    });
  },
  methods: {
    gogo() {
      this.$router.push("/");
      window.localStorage.setItem("guidePage", true);
    },
  },
};
</script>

<style lang="less" >
.swiper-container {
  position: fixed !important;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  // background-color: radial-gradient(#d4473c, pink);
  background: radial-gradient(pink, #d4473c);
}

.guidePageslide {
  text-align: center;
  position: relative;
  .img {

    height: 300px;
    width: 300px;
    margin: 0 auto;
    margin-top: 120px;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .img1 {
    background-image: url("../../assets/img/music04.jpg");
  }
  .img2 {
    background-image: url("../../assets/img/music03.jpg");
  }
  .img3 {
    background-image: url("../../assets/img/music05.jpg");
  }
  h3 {
    margin: 30px;
    color: #fff;
    font-size: 22px;
    // font-weight: 700;
  }
  .van-button {
    margin: 30px;
    height: 40px;
    padding: 6px;
    width: 140px;
    font-size: 22px;
    border-radius: 6px;
  }
}
</style>